import * as React from "react";
import { makeStyles } from "@material-ui/styles";
import { StyleRules } from "@material-ui/styles/withStyles";
import { Button, Card, Form, Icon, Input, Modal, Switch, Table } from "antd";
import { FormComponentProps } from "antd/es/form";
import { ColumnProps } from "antd/lib/table";
import { useEffect, useState } from "react";
import Axios from "axios";
import { PersonData } from "../common";
import service from "../request/Service";

const useStyles = makeStyles<StyleRules<any, "root">>({
  root: {
    minHeight: "95vh"
  }
});
interface Iprops extends FormComponentProps {}
const ViewPerson = (props: Iprops) => {
  const clsses = useStyles();
  const [data, setData] = useState([]);

  const tableTitle: Array<ColumnProps<any>> = [
    { align: "center", dataIndex: "name", title: "姓名" },
    {
      align: "center",
      dataIndex: "status",
      title: "状态",
      render: (text, record) => {
        if (text) {
          return "启用";
        } else {
          return "停用";
        }
      }
    },
    { align: "center", dataIndex: "kind", title: "种类" },
    { align: "center", dataIndex: "price", title: "价格" },
    /*{ align: "center", dataIndex: "workingLife", title: "工作年限" },*/
    {
      align: "center",
      title: "操作",
      render: (text, record) => {
        return (
          <span>
            <Button
              onClick={() => {
                Modal.confirm({
                  title: "是否删除?",
                  content: "无法撤销",
                  okText: "是的",
                  okType: "danger",
                  cancelText: "取消",
                  onOk() {
                    deleteData(record);
                  },
                  onCancel() {
                    console.log("Cancel");
                  }
                });
              }}
            >
              删除
            </Button>
          </span>
        );
      }
    },
    {
      align: "center",
      title: "派送/待定",
      dataIndex: "status",
      render: (text, record) => {
        return (
          <span>
            <Switch
              defaultChecked={text}
              onChange={checked => {
                stopPerson(record);
              }}
            />
          </span>
        );
      }
    }
  ];
  const stopPerson = (persona: PersonData) => {
    service
      .put("/personInfo", { ...persona, status: !persona.status })
      .then(value => {
        getData(props.form.getFieldsValue());
      });
  };
  const deleteData = (person: PersonData) => {
    service.delete("/personInfo", { data: person }).then(value => {
      getData(props.form.getFieldsValue());
    });
  };
  useEffect(() => {
    getData();
  }, []);
  const getData = (params?: any) => {
    Axios.get("/personInfo", { params }).then(value => {
      if (value.data.content) {
        setData(value.data.content);
      }
    });
  };
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    getData(props.form.getFieldsValue());
  };

  return (
    <div className={clsses.root}>
      <Card>
        <Form layout="inline" onSubmit={handleSubmit}>
          <Form.Item>
            {props.form.getFieldDecorator("name", {})(
              <Input prefix={<Icon type="user" />} placeholder="姓名" />
            )}
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Table dataSource={data} columns={tableTitle} />
    </div>
  );
};
export default Form.create({})(ViewPerson);
